<template>
  <div class="page-mobile-testing">
    <van-nav-bar class="cd-header" title="考试记录">
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" />
      </template>
      <template #right v-if="is_exam && is_ready">
        <div class="right-nav" @click="is_show = true">答题卡</div>
      </template>
    </van-nav-bar>
    <div class="fixed-box"></div>
    <template v-if="question_list.length > 0">
      <template v-if="!is_exam || (is_exam && is_ready)">
        <div class="action-box">
          <button @click="toPath('prev')">
            <van-icon name="arrow-left"></van-icon>
            上一题
          </button>

          <!-- <button @click="handleWatch" v-if="!is_exam">
            <van-icon name="passed" />
            查看解析
          </button> -->
          <button v-if="!is_exam">
            <van-icon name="passed" />
            试题解析
          </button>
          <button @click="toPath('next')">
            下一题
            <van-icon name="arrow"></van-icon>
          </button>
        </div>
        <div
          class="wrong_num_box"
          v-if="is_wrong_train && getWrongTime !== 'hidden'"
        >
          错误次数：{{ getWrongTime }}次
        </div>
        <div class="question-body">
          <van-swipe
            class="my-swipe"
            :loop="false"
            :show-indicators="false"
            ref="qs-swiper"
            @change="swiperChange"
          >
            <van-swipe-item v-for="(item, index) in question_list" :key="index">
              <div class="paper-box">
                <div class="paper-type">
                  <div class="pt-left">{{ getQuestionType(item) }}</div>
                  <div class="pt-right">
                    {{ index + 1 }} / {{ question_list.length }}
                  </div>
                </div>
                <!-- <div class="question-content">
              {{ item.parsing }}
            </div> -->
                <div class="question-text">
                  {{ item.question.question }}
                </div>
                <!-- 单选题 -->
                <template v-if="[1].includes(item.type)">
                  <div class="question-anser">
                    <van-radio-group
                      v-model="item.user_answer"
                      @change="handleRadioChange"
                      :disabled="true"
                    >
                      <van-radio
                        :name="x"
                        v-for="(i, x) in item.question.answer"
                        :key="x"
                        :class="[
                          item.is_show_edit &&
                          item.answer != item.user_answer &&
                          item.answer == x
                            ? 'error'
                            : item.answer.includes(x) &&
                              item.user_answer.includes(x)
                            ? 'green'
                            : 'white',
                        ]"
                        >{{ i }}</van-radio
                      >
                    </van-radio-group>
                  </div>
                  <div class="parsing-box" v-if="item.is_show_edit">
                    <van-divider>正确答案</van-divider>
                    <div class="ps-tx">
                      {{ item.question.answer[Number(item.answer)] }}
                    </div>
                    <van-divider>解析</van-divider>
                    <div class="ps-tx">
                      {{ item.parsing }}
                    </div>
                  </div>
                  <!-- <div class="btn-submit" v-if="!item.is_show_edit">
                    <van-button type="primary" @click="handleCheck(item)" block
                      >确认</van-button
                    >
                  </div> -->
                </template>

                <!-- 多选题 -->
                <template v-if="[2].includes(item.type)"
                  ><div class="question-anser">
                    <van-checkbox-group
                      v-model="item.user_answer"
                      :disabled="true"
                    >
                      <van-checkbox
                        v-for="(i, x) in item.question.answer"
                        :name="x"
                        :key="x"
                        :class="[
                          item.is_show_edit &&
                          ((!item.answer.includes(x) &&
                            item.user_answer.includes(x)) ||
                            (item.answer.includes(x) &&
                              !item.user_answer.includes(x)))
                            ? 'error'
                            : item.answer.includes(x) &&
                              item.user_answer.includes(x)
                            ? 'green'
                            : 'white',
                        ]"
                        >{{ i }}</van-checkbox
                      >
                    </van-checkbox-group>
                  </div>
                  <div class="parsing-box" v-if="item.is_show_edit">
                    <van-divider>正确答案</van-divider>
                    <div class="ps-tx">
                      <div
                        class="ps-it"
                        v-for="(i, x) in item.question.answer"
                        :name="x"
                        :key="x"
                        v-if="item.answer.includes(x)"
                      >
                        {{ i }}
                      </div>
                    </div>
                    <van-divider>解析</van-divider>
                    <div class="ps-tx">
                      {{ item.parsing }}
                    </div>
                  </div>
                  <!-- <div class="btn-submit" v-if="!item.is_show_edit">
                    <van-button type="primary" @click="handleCheck(item)" block
                      >确认</van-button
                    >
                  </div> -->
                </template>

                <!-- 简答题 -->
                <template v-if="[3].includes(item.type)">
                  <div class="question-anser">
                    <van-field
                      v-model="item.user_answer"
                      type="textarea"
                      :rows="3"
                      :disabled="true"
                      placeholder="请输入答案"
                      :class="[
                        item.is_show_edit && item.user_answer != item.answer
                          ? 'error_input'
                          : null,
                      ]"
                    />
                  </div>
                  <div class="parsing-box" v-if="item.is_show_edit">
                    <van-divider>正确答案</van-divider>
                    <div class="ps-tx">{{ item.answer }}</div>
                    <van-divider>解析</van-divider>
                    <div class="ps-tx">
                      {{ item.parsing }}
                    </div>
                  </div>
                  <!-- <div class="btn-submit" v-if="!item.is_show_edit">
                    <van-button type="primary" @click="handleCheck(item)" block
                      >确认</van-button
                    >
                  </div> -->
                </template>

                <!-- 填空题 -->
                <template v-if="[4].includes(item.type)">
                  <div class="question-anser">
                    <!-- <div class="qs-tt">答案：</div> -->
                    <van-cell-group>
                      <van-field
                        v-for="(i, x) in item.user_answer"
                        :value="i"
                        :label="x + 1 + '.'"
                        :key="x"
                        :disabled="true"
                        type="textarea"
                        :class="[
                          item.is_show_edit &&
                          item.user_answer[x] != item.answer[x]
                            ? 'error_input'
                            : null,
                        ]"
                        :rows="3"
                        @input="
                          (e) => {
                            handleInput(e, x, item);
                          }
                        "
                        placeholder="请输入答案"
                      />
                    </van-cell-group>
                  </div>
                  <div class="parsing-box" v-if="item.is_show_edit">
                    <van-divider>正确答案</van-divider>
                    <div class="ps-tx">
                      <div class="ps-it" v-for="(i, x) in item.answer" :key="x">
                        {{ i }}
                      </div>
                    </div>
                    <van-divider>解析</van-divider>
                    <div class="ps-tx">
                      {{ item.parsing }}
                    </div>
                  </div>
                  <!-- <div class="btn-submit" v-if="!item.is_show_edit">
                    <van-button type="primary" @click="handleCheck(item)" block
                      >确认</van-button
                    >
                  </div> -->
                </template>

                <!-- 判断题 -->
                <template v-if="[5].includes(item.type)">
                  <div class="question-anser">
                    <van-radio-group
                      v-model="item.user_answer"
                      @change="handleRadioChange"
                      :disabled="true"
                    >
                      <van-radio
                        :name="0"
                        :class="[
                          item.is_show_edit &&
                          item.answer != item.user_answer &&
                          item.answer == 0
                            ? 'error'
                            : null,
                        ]"
                        >错误</van-radio
                      >
                      <van-radio
                        :name="1"
                        :class="[
                          item.is_show_edit &&
                          item.answer != item.user_answer &&
                          item.answer == 1
                            ? 'error'
                            : null,
                        ]"
                        >正确</van-radio
                      >
                    </van-radio-group>
                  </div>
                  <div class="parsing-box" v-if="item.is_show_edit">
                    <van-divider>正确答案</van-divider>
                    <div class="ps-tx">
                      {{ item.answer == 0 ? "错误" : "正确" }}
                    </div>
                    <van-divider>解析</van-divider>
                    <div class="ps-tx">
                      {{ item.parsing }}
                    </div>
                  </div>
                  <!-- <div class="btn-submit" v-if="!item.is_show_edit">
                    <van-button type="primary" @click="handleCheck(item)" block
                      >确认</van-button
                    >
                  </div> -->
                </template>
              </div>
            </van-swipe-item>
            <van-swipe-item class="last-page" v-if="!is_done_test">
              <div class="msg-tx">
                <van-icon name="good-job-o" color="#07c160" />
                试卷浏览结束
              </div>
              <div class="msg-btn">
                <van-button type="primary" @click="handleRestart">{{
                  is_exam ? "提交考试" : "重新查看"
                }}</van-button>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {
  getTestPaper,
  getQuestionBank,
  sumbitTest,
  wrongQuestions,
  wrongQuestionsSave,
  getMyTestLog,
} from "~/api/test";
import { getCourse } from "~/api/course";
import { uuid2 } from "~/utils/commonfun";
export default {
  components: {},
  data() {
    return {
      course_obj: {}, //课程
      question_type_arr: [
        { id: 1, name: "单选" },
        { id: 2, name: "多选" },
        { id: 3, name: "简答" },
        { id: 4, name: "填空" },
        { id: 5, name: "判断" },
      ], //题型
      question_arr: [], //练习题
      paper_obj: {
        items: [],
      }, //试卷
      is_ready: false, //是否进入考试
      num_active: 0, //当前页
      interval: null, //定时器
      seconds: 0, //倒计时
      is_finish: false, //倒计时结束
      is_show: false, //答题卡弹窗
      is_show_result: false, //考试结果弹窗
      test_result: {
        paperId: "",
        userId: "",
        score: "",
        createTime: 1594462514000,
      },
      is_done_test: false, //是否提交了考试
      test_log: [],
      // wrong_questions_list: [] //错题列表
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      major_list(state) {
        return state.major_list;
      },
      token(state) {
        return state.token;
      },
    }),
    //课程id
    courseId() {
      return this.$route.query.id || 1;
    },
    //试卷id
    paper_id() {
      return this.$route.query.paper_id;
    },
    //考试记录id
    test_log_id() {
      return this.$route.query.test_log_id;
    },
    //是否是考试
    is_exam() {
      return this.$route.query.is_exam && this.$route.query.is_exam == 1;
    },
    //是否是错题训练
    is_wrong_train() {
      return (
        this.$route.query.is_wrong_train &&
        this.$route.query.is_wrong_train == 1
      );
    },
    //试题
    question_list: {
      get() {
        //   console.log("question_arr---------",this.question_arr)
        // this.question_arr.map(item=>item.user_answer = [1,2,3])
        //   console.log("question_arr---------",this.question_arr)
        console.log(this.question_arr,this.test_log)
        let question_arr = [];
        if (this.test_log.length > 0) {
          question_arr = this.question_arr.map((item, index) => {
            if(item.id === this.test_log[index].mqId){
             if (this.test_log[index].questionType === 2 || this.test_log[index].questionType === 4) {
                return {
                  ...item,
                  user_answer: this.test_log[index] && this.test_log[index].chosenAnswer?JSON.parse(this.test_log[index].chosenAnswer):[],
                  is_show_edit:true
                };
              } else {
                return {
                  ...item,
                  user_answer: this.test_log[index].chosenAnswer,
                  is_show_edit:true
                };
              }
            }else{
              return item;
            }
            
          });
        } else {
          question_arr = this.question_arr;
        }

        return question_arr;
      },
      set(val) {},
    },
    getWrongTime() {
      if (this.num_active > this.question_list.length - 1) {
        return "hidden";
      } else {
        return (
          this.question_list[this.num_active] &&
          this.question_list[this.num_active].wrong_count
        );
      }
    },
  },
  watch: {},
  activated() {
    this.initPage();
  },
  deactivated() {
    this.initState();
    this.destroyRemotion();
  },
  methods: {
    ...mapActions(["initMajorList"]),
    ...mapMutations(["SET_IS_LOADING"]),
    async getMyTestLog() {
      this.SET_IS_LOADING(true);

      let result = await getMyTestLog({
        paperId: this.paper_id,
        userId: this.user_info.id,
        id: this.test_log_id,
      });
      console.log("result:---", result);
      if (result && result.data && result.data.code == 200) {
        this.test_log = result.data.data;
      } else {
        this.$Message.error("获取失败！");
        this.SET_IS_LOADING(true);
      }
    },
    swiperChange(index) {
      console.log("index:", index);
      this.num_active = index;
    },
    handleStartEaxm() {
      this.is_ready = true;
      this.seconds = Number(this.paper_obj.span) * 60 * 1000;
    },
    onClickLeft() {
      if (this.is_exam && !this.is_done_test) {
        this.$dialog
          .confirm({
            title: "提示",
            message: "退出当前页面考试将失败，你确定要退出吗？",
          })
          .then(() => {
            this.$router.back();
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else {
        this.$router.back();
      }
    },
    async saveWrong(item) {
      let params = {
        item: JSON.stringify([
          {
            userId: this.user_info.id,
            donePaperId: -1,
            score: 0,
            doneQuestionType: "w",
            questionType: item.type,
            mqId: item.id,
          },
        ]),
      };
      let result = await wrongQuestionsSave(params);
      console.log("保存错题：", result);
      if (result && result.data && result.data.code == 200) {
      } else {
        this.$toast("保存失败！", result && result.data && result.data.msg);
      }
    },
    async getWrong() {
      let params = {
        userId: this.user_info.id,
        courseId: this.courseId,
      };
      let result = await wrongQuestions(params);
      console.log("获取错题：", result);
      if (result && result.data && result.data.code == 200) {
        //格式化题目
        let question_arr = result.data.data.rows.map((i) => {
          let item_copy = { ...i.question };
          let user_answer;
          switch (item_copy.type) {
            case 1:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              break;
            case 2:
              user_answer = [];
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              break;
            case 3:
              user_answer = "";
              break;
            case 4:
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              user_answer = item_copy.answer.map((i) => {
                return "";
              });
              break;
            case 5:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: JSON.parse(item_copy.answer),
              };
              break;
          }
          item_copy = {
            ...item_copy,
            user_answer,
          };
          return item_copy;
        });
        console.log("question_arr:", question_arr);
        //去重计数
        let trim_question_arr = [];
        for (let i = 0; i < question_arr.length; i++) {
          let is_exit = trim_question_arr.filter(
            (ix) => ix.id == question_arr[i].id
          );
          if (is_exit.length == 0) {
            trim_question_arr.push({
              ...question_arr[i],
              wrong_count: 1,
              question: JSON.parse(question_arr[i].question),
            });
          } else {
            trim_question_arr = trim_question_arr.map((ix) => {
              return {
                ...ix,
                wrong_count: ix.wrong_count + 1,
              };
            });
          }
        }
        console.log("trim_question_arr:", trim_question_arr);
        this.question_arr = trim_question_arr;
      } else {
        this.$toast("获取失败！", result && result.data && result.data.msg);
      }
    },
    async getTestPaper() {
      let params = {
        id: this.paper_id,
      };
      let result = await getTestPaper(params);
      if (result && result.data && result.data.code == 200) {
        this.paper_obj = result.data.data;
        this.question_arr = this.paper_obj.items
          .filter(
            (i) =>
              i.question &&
              i.question.chapter &&
              i.question.difficulty &&
              i.question.type
          )
          .map((i) => {
            let item_copy = {
              ...i.question,
              score: i.score,
              question: JSON.parse(i.question.question),
            };
            //user_answer存在使用user_answer
            if (Object.keys(item_copy).includes("user_answer")) {
              //user_answer不存在新建user_answer
            } else {
              let user_answer;
              switch (item_copy.type) {
                case 1:
                  user_answer = "";
                  item_copy = {
                    ...item_copy,
                    answer: JSON.parse(item_copy.answer),
                  };
                  break;
                case 2:
                  user_answer = [];
                  item_copy = {
                    ...item_copy,
                    answer: JSON.parse(item_copy.answer),
                  };
                  break;
                case 3:
                  user_answer = "";
                  break;
                case 4:
                  item_copy = {
                    ...item_copy,
                    answer: JSON.parse(item_copy.answer),
                  };
                  user_answer = item_copy.answer.map((i) => {
                    return "";
                  });
                  break;
                case 5:
                  user_answer = "";
                  item_copy = {
                    ...item_copy,
                    answer: JSON.parse(item_copy.answer),
                  };
                  break;
              }
              item_copy = {
                ...item_copy,
                user_answer,
              };
            }
            //is_show_edit不存在设置为false
            if (!Object.keys(item_copy).includes("is_show_edit")) {
              item_copy = {
                ...item_copy,
                is_show_edit: false,
              };
            }
            //is_answered不存在设置为false
            if (!Object.keys(item_copy).includes("is_answered")) {
              item_copy = {
                ...item_copy,
                is_show_edit: false,
              };
            }
            return item_copy;
          });
      } else {
        this.$toast("获取失败！");
      }
    },
    async getData() {
      return new Promise(async (res, rej) => {
        this.SET_IS_LOADING(true);
        let result = await getCourse({
          id: this.courseId,
        });
        if (result && result.data && result.data.code == 200) {
          const { data } = result.data;
          if (data && data.rows && data.rows.length > 0) {
            this.course_obj = data.rows[0];
          }
        } else {
          this.$toast(("加载失败！", result.data.msg));
        }
        this.SET_IS_LOADING(false);
        res();
      }).then();
    },
    async getQuestion() {
      let params = {
        courseId: this.courseId,
      };
      let result = await getQuestionBank(params);
      if (result && result.data && result.data.code == 200) {
        this.question_arr = result.data.data.rows.map((i) => {
          let item_copy = {
            ...i,
            question: JSON.parse(i.question),
          };
          let user_answer;
          switch (item_copy.type) {
            case 1:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: JSON.parse(i.answer),
              };
              break;
            case 2:
              user_answer = [];
              item_copy = {
                ...item_copy,
                answer: JSON.parse(i.answer),
              };
              break;
            case 3:
              user_answer = "";
              break;
            case 4:
              item_copy = {
                ...item_copy,
                answer: JSON.parse(i.answer),
              };
              user_answer = item_copy.answer.map((i) => {
                return "";
              });
              break;
            case 5:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: JSON.parse(i.answer),
              };
              break;
          }
          return {
            ...item_copy,
            is_show_edit: false,
            user_answer,
            is_answered: false,
          };
        });
      } else {
        this.$toast("获取失败！");
      }
    },
    getMajorName(item) {
      let res = this.major_list.filter((i) => i.id == item.majorId);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return "未知";
      }
    },
    getQuestionType(item) {
      let res = this.question_type_arr.filter((i) => i.id == item.type);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return "未知";
      }
    },
    handleInput(val, index, item) {
      this.question_arr = this.question_arr.map((i) => {
        if (i.id == item.id) {
          return {
            ...i,
            user_answer: i.user_answer.map((i1, x1) => {
              if (x1 == index) {
                return val;
              } else {
                return i1;
              }
            }),
          };
        } else {
          return i;
        }
      });
    },
    handleRadioChange() {},
    toPath(type) {
      if (type == "prev") {
        this.$refs["qs-swiper"].prev();
      } else if (type == "next") {
        this.$refs["qs-swiper"].next();
      } else if (typeof type == "number") {
        this.$refs["qs-swiper"].swipeTo(type);
      }
    },
    handleCheck(item) {
      if (this.is_exam) {
        this.toPath("next");
      } else {
        let is_right;
        switch (item.type) {
          case 1:
            if (item.answer == item.user_answer) {
              is_right = true;
            } else {
              is_right = false;
            }
            break;
          case 2:
            let answer_arr2 = [];
            // item.answer.forEach((i1, xi) => {
            item.answer.forEach((i2, x2) => {
              if (item.user_answer.includes(i2)) {
                answer_arr2 = [...answer_arr2, true];
              } else {
                answer_arr2 = [...answer_arr2, false];
              }
            });
            if (answer_arr2.includes(false)) {
              is_right = false;
            } else {
              is_right = true;
            }
            break;
          case 3:
            if (item.answer == item.user_answer) {
              is_right = true;
            } else {
              is_right = false;
            }
            break;
          case 4:
            let answer_arr4 = [];
            item.answer.forEach((i1, xi) => {
              item.user_answer.forEach((i2, x2) => {
                if (i1 == i2) {
                  answer_arr4 = [...answer_arr4, true];
                } else {
                  answer_arr4 = [...answer_arr4, false];
                }
              });
            });
            if (answer_arr4.includes(false)) {
              is_right = false;
            } else {
              is_right = true;
            }
            break;
          case 5:
            if (item.answer == item.user_answer) {
              is_right = true;
            } else {
              is_right = false;
            }
            break;
        }
        console.log("is_right:", is_right);
        this.question_arr = this.question_arr.map((i, x) => {
          if (item.id == i.id) {
            return {
              ...i,
              is_answered: true,
            };
          } else {
            return i;
          }
        });
        if (!is_right) {
          this.question_arr = this.question_arr.map((i, x) => {
            if (item.id == i.id) {
              return {
                ...i,
                is_show_edit: true,
              };
            } else {
              return i;
            }
          });
          this.saveWrong({ ...item, is_answered: true, is_show_edit: true });
        } else {
          this.toPath("next");
        }
      }
    },
    handleRestart() {
      if (this.is_exam) {
        this.handleSubmit();
      } else {
        this.question_arr = this.question_arr.map((i) => {
          let item_copy = { ...i };
          let user_answer;
          switch (item_copy.type) {
            case 1:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              break;
            case 2:
              user_answer = [];
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              break;
            case 3:
              user_answer = "";
              break;
            case 4:
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              user_answer = item_copy.answer.map((i) => {
                return "";
              });
              break;
            case 5:
              user_answer = "";
              item_copy = {
                ...item_copy,
                answer: i.answer,
              };
              break;
          }
          return {
            ...i,
            is_show_edit: false,
            user_answer,
            is_answered: false,
          };
        });
        this.$nextTick(() => {
          this.toPath(0);
        });
      }
    },
    handleWatch() {
      this.question_arr = this.question_arr.map((i, x) => {
        if (x == this.num_active) {
          return {
            ...i,
            is_show_edit: true,
          };
        } else {
          return i;
        }
      });
    },
    async handleSubmit() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "您确定要提交试卷吗？",
        })
        .then(async () => {
          let params = {
            userId: this.user_info.id,
            paperId: Number(this.paper_id),
            items: JSON.stringify(
              this.question_list.map((i) => {
                let copy_item = { ...i };
                delete copy_item.is_show_edit;
                delete copy_item.is_answered;
                let user_answer = copy_item.user_answer;
                if (copy_item.type == 1 || copy_item.type == 5) {
                  user_answer = String(copy_item.user_answer);
                } else {
                  user_answer = copy_item.user_answer;
                }
                return {
                  ...copy_item,
                  user_answer,
                  mqId: copy_item.id,
                  questionType: copy_item.type,
                  testPaperId: Number(this.paper_id),
                };
              })
            ),
          };
          console.log("params:", params);
          let result = await sumbitTest(params);
          console.log("result:", result);
          if (result && result.data && result.data.code == 200) {
            this.test_result = result.data.data;
            //拷贝数组  保留用户的答题
            let origin_question_list = this.question_list.map((i) => {
              return {
                ...i,
              };
            });
            this.question_arr = this.question_arr.map((i, x) => {
              return {
                ...i,
                is_answered: true,
                is_show_edit: true,
              };
            });
            // this.paper_obj = {
            //   ...this.paper_obj,
            //   items: this.paper_obj.items.map((i, x) => {
            //     let copy_item = { ...i };
            //     return {
            //       ...copy_item,
            //       question: {
            //         ...copy_item.question,
            //         is_answered: true,
            //         is_show_edit: true,
            //         user_answer: origin_question_list[x].user_answer,
            //         answer: origin_question_list[x].answer
            //       }
            //     };
            //   })
            // };
            this.is_show_result = true;
            this.is_done_test = true;
            this.interval = null;
            this.destroyRemotion();
          } else {
            this.$toast("提交失败！", result && result.data && result.data.msg);
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    finish() {
      this.is_finish = true;
      this.handleSubmit();
    },
    initPage() {
      if (process.client) {
        if (!this.token && Object.keys(this.user_info).length == 0) {
          this.$router.replace("/m/login");
        }
      }
      this.getData();
      this.initMajorList();
      this.getMyTestLog();
      if (this.paper_id) {
        console.log("----------------试卷----------------");
        this.getTestPaper();
        if (process.client) {
          this.$nextTick(() => {
            this.removeReflesh();
          });
        }
      } else if (this.is_wrong_train) {
        console.log("----------------错题----------------");
        this.getWrong();
      } else {
        this.getQuestion();
      }
    },
    initState() {
      this.course_obj = {};
      this.question_arr = [];
      this.paper_obj = {};
      this.is_ready = false;
      this.num_active = 0;
      this.interval = null;
      this.seconds = 0;
      this.is_finish = false;
      this.is_done_test = false;
      this.is_show = false;
      this.is_show_result = false;
    },
    //阻止F5刷新
    keydown(e) {
      var evt = window.event || e;
      var code = evt.keyCode || evt.which;
      console.log("code:", code);
      //组合事件
      if (
        code == 116 ||
        (evt.ctrlKey == true && code == 82) ||
        (evt.ctrlKey == true && code == 116) ||
        code == 114
      ) {
        if (evt.preventDefault) {
          evt.preventDefault();
        } else {
          evt.keyCode = 0;
          evt.returnValue = false;
          evt.cancelBubble = true;
          return false;
        }
      }

      //屏蔽Alt+F4
      if (evt.altKey && code == 115) {
        window.showModelessDialog(
          "about:blank",
          "",
          "dialogWidth:1px;dialogheight:1px"
        );
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }

      //屏蔽 Alt+ 方向键 ← ;屏蔽 Alt+ 方向键 → ！验证
      if (evt.altKey && (code == 37 || code == 39)) {
        console.log("网页路由");
        evt.keyCode = 0;
        evt.returnValue = false;
        evt.cancelBubble = true;
        return false;
      }
    },
    reflesh(e) {
      var evt = window.event || e;
      let message = undefined;
      event.returnValue = message;
      return message;
    },
    context(e) {
      return false;
    },
    removeReflesh() {
      console.log("清除刷新事件！");
      document.addEventListener("keydown", this.keydown, false);
      document.addEventListener("contextmenu", this.context, false);
      window.addEventListener("beforeunload", this.reflesh, false);
    },
    destroyRemotion() {
      console.log("恢复事件！");
      document.removeEventListener("keydown", this.keydown);
      document.removeEventListener("contextmenu", this.context);
      window.removeEventListener("beforeunload", this.reflesh);
    },
    handleTestConfirm() {
      this.$router.back();
    },
    handleTestCancel() {
      // console.log("paper_obj:", this.paper_obj);
      // console.log("question_list:", this.question_list);
      // this.paper_obj = {
      //   ...this.paper_obj,
      //   items: this.paper_obj.items.map((i, x) => {
      //     return {
      //       ...i,
      //       question: {
      //         ...i.question,
      //         is_answered: true,
      //         is_show_edit: true,
      //         user_answer: this.question_list[x].user_answer
      //       }
      //     };
      //   })
      // };
    },
  },
  created() {
    this.initPage();
    console.log(this.$t("locale.m.home"));
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.page-mobile-testing {
}
</style>
<style lang="scss">
.page-mobile-testing {
  min-height: 100vh;
  background-color: #f9f8f8;
  .right-nav {
    color: #fff;
  }
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 7.2rem;
    height: 0.8rem;
    line-height: 0.8rem;
    background-color: var(--theme-color);
    z-index: 9;
    .van-nav-bar__arrow {
      font-size: 0.35rem;
    }
    .van-nav-bar__left,
    .van-nav-bar__right {
      padding: 0.16rem;
      > i {
        font-size: 0.35rem;
        color: #fff;
      }
    }
    .van-nav-bar__text {
      font-size: 0.24rem;
    }
    .van-nav-bar__title {
      font-size: 0.28rem;
      color: #fff;
    }
  }
  .van-tabs__content {
    margin-top: 1rem;
  }
  .van-tabs__wrap {
    position: fixed;
    top: 4.8rem;
    left: 0;
    z-index: 9;
    width: 7.2rem;
    height: 0.8rem;
    .van-tabs__nav {
      position: fixed;
      height: 0.8rem;
      width: 7.2rem;
      top: 4.8rem;
      left: 0;
    }
  }
  .fixed-box {
    height: 0.8rem;
  }
  .question-desc {
    margin: 0.6rem auto 0;
    padding: 0.6rem 0.8rem;
    border-radius: 0.05rem;
    width: 6.72rem;
    box-shadow: 0rem 0.02rem 0.06rem 0rem rgba(0, 0, 0, 0.4);
    background-color: #fff;
    .desc-tt {
      font-size: 0.32rem;
      color: #010101;
      text-align: center;
      line-height: 1.4;
    }
    .desc-tx {
      margin-top: 0.16rem;
      font-size: 0.24rem;
      color: #010101;
      text-align: center;
      line-height: 1.4;
    }
    .desc-ct {
      margin-top: 0.16rem;
      font-size: 0.24rem;
      color: #010101;
      text-align: left;
      line-height: 1.4;
    }
  }
  .btn-st {
    margin: 0.6rem auto 0;
    width: 6.72rem;
    .van-button {
      width: 100%;
    }
  }
  .action-box {
    padding: 0.2rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > button {
      padding: 0 0.2rem;
      margin: 0;
      height: 0.61rem;
      line-height: 0.61rem;
      font-size: 0.22rem;
      border-radius: 0.04rem;
      color: #fff;
      background-color: var(--theme-color);
      border: 1px solid var(--theme-color);
      cursor: pointer;
      transition: opacity 0.2s;
      -webkit-appearance: none;
      position: relative;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      > i {
        padding: 0 0.05rem;
        font-size: 0.26rem;
      }
      &:active {
        opacity: 0.9;
      }
    }
  }
  .wrong_num_box {
    padding: 0 0.1rem 0.2rem;
    text-align: center;
    color: #666;
    font-size: 0.26rem;
  }
  .question-body {
    margin: 0rem auto 0;
    width: 6.72rem;
    background-color: #fff;
    box-shadow: 0rem 0.02rem 0.06rem 0rem rgba(0, 0, 0, 0.4);
    border-radius: 0.05rem;
    .my-swipe {
      border-radius: 0.05rem;
      overflow: hidden;
      .van-swipe-item {
        color: #fff;
        font-size: 20px;
        min-height: 150px;
        background-color: #fff;
      }
      .paper-box {
        color: #010101;
        padding: 0.1rem;
        .paper-type {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          text-align: left;
          font-size: 0.28rem;
          .pt-left {
            padding: 0.2rem 0;
          }
          .pt-right {
            flex: 1;
            text-align: right;
          }
          &::before {
            content: "";
            display: block;
            width: 0.1rem;
            height: 0.4rem;
            margin-right: 0.1rem;
            background-color: var(--theme-color);
          }
          &::after {
            content: "";
            display: block;
            width: 100%;
            height: 0.01rem;
            background-color: #f0efef;
          }
        }
        .question-content {
          padding: 0.4rem 0.1rem 0.2rem;
          font-size: 0.24rem;
          color: #010101;
          line-height: 1.4;
          text-align: left;
        }
        .question-text {
          padding: 0.2rem 0.1rem;
          text-align: left;
          font-size: 0.24rem;
          color: #010101;
        }
        .question-anser {
          padding: 0 0.1rem;
          margin-top: 0.1rem;
          text-align: left;
          .qs-tt {
            font-size: 0.26rem;
            color: #010101;
          }
          .van-cell {
            padding: 0.2rem;
            .van-field__label {
              width: 1.2rem;
            }
          }
          .van-radio {
            border: 0.02rem solid #eee;
            padding: 0.2rem 0.1rem;
            border-radius: 0.1rem;
            .van-radio__icon {
              font-size: 0.28rem;
            }
            .van-radio__label {
              font-size: 0.24rem;
              line-height: 1.4;
            }
          }
          .van-radio + .van-radio {
            margin-top: 0.1rem;
          }
          .van-checkbox {
            border: 0.02rem solid #eee;
            padding: 0.2rem 0.1rem;
            border-radius: 0.1rem;
            .van-checkbox__icon {
              font-size: 0.28rem;
            }
            .van-checkbox__label {
              font-size: 0.24rem;
              line-height: 1.4;
            }
          }
          .van-checkbox + .van-checkbox {
            margin-top: 0.1rem;
          }
          .error {
            background: #f02318;
            color: #fff;
            .van-radio__label {
              color: #fff;
            }
            .van-checkbox__label {
              color: #fff;
            }
          }
          .white {
            .van-radio__label {
              color: rgb(0, 0, 0);
            }
            .van-checkbox__label {
              color: rgb(0, 0, 0);
            }
          }
          .green {
            background: green;
            color: #fff;
            .van-radio__label {
              color: #fff;
            }
            .van-checkbox__label {
              color: #fff;
            }
          }
          .error_input {
            .van-field__control {
              color: #f02318;
            }
          }
        }
        .btn-submit {
          padding: 0.2rem 0.1rem 0;
        }
      }
    }
  }
  .parsing-box {
    margin: 0.2rem auto 0;
    background-color: #fff;
    border-radius: 0.05rem;
    .ps-tx {
      margin-top: 0.1rem;
      font-size: 0.28rem;
      color: #010101;
      line-height: 1.4;
    }
  }
  .last-page {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .van-icon {
      margin-right: 0.1rem;
      font-size: 0.5rem;
    }
    .msg-tx {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      font-size: 0.32rem;
      color: #666;
    }
    .msg-btn {
      width: 100%;
      text-align: center;
    }
  }
  .num-box {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    padding: 0.2rem 0;
    width: 6.72rem;
    background-color: #fff;
    max-height: 5rem;
    overflow: auto;
    .num-item {
      margin: 0.1rem 0.08rem;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 0.5rem;
      color: #010101;
      border: 0.02rem #999 solid;
      font-size: 0.28rem;
    }
    .num-item-active {
      background-color: var(--theme-color);
      color: #fff;
      border: 0.02rem var(--theme-color) solid;
    }
  }
  .count-down-box {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.2rem;
    font-size: 0.24rem;
    color: #010101;
    background-color: #fff;
    .van-count-down {
      padding-left: 0.05rem;
      font-size: 0.18rem;
      line-height: 0.26rem;
      .colon {
        display: inline-block;
        margin: 0 0.04rem;
        color: #010101;
      }
      .block {
        display: inline-block;
        padding: 0 0.08rem;
        color: var(--theme-color);
        font-size: 0.18rem;
        text-align: center;
        background-color: #f9f8f8;
        border-radius: 0.05rem;
      }
    }
  }
  .van-dialog {
    width: 5.5rem;
    .test-result-box {
      font-size: 0.24rem;
      color: #101010;
      line-height: 1.4;
      .rs-tt {
        font-size: 0.28rem;
        color: #101010;
        text-align: center;
        margin: 0.35rem 0 0.1rem;
        .tt-st {
          font-weight: 700;
        }
        .rs-sc {
          font-size: 0.6rem;
          font-weight: 700;
          color: var(--theme-color);
          vertical-align: text-bottom;
          line-height: 1;
        }
        .rs-lg {
          margin-left: 0.1rem;
          font-size: 0.34rem;
          color: var(--theme-color);
          vertical-align: text-bottom;
        }
      }
      .rs-md {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        margin: 0.3rem 0 0.5rem;
      }
      .rs-tx {
        text-align: center;
        font-size: 0.28rem;
        margin: 0.1rem 0rem 0.3rem;
      }
    }
  }
  .van-popup--bottom {
    // position: relative;
    // padding-top: 44px;
    // .van-action-sheet__header {
    //   width: 100%;
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    // }
  }
}
</style>
